<template>
  <div class="sj-form">
    <stepBar length=100></stepBar>
    <div class="form-main">
      <ul class="select-last ">
        <li>
          <div class="input-box flex-box">
            <div><p>是否有家族遗传病史</p>
              <input type="radio" name="BingShi" :checked = !otherMsg.isBingShi.value @click="showA(false)"><b>无</b>
              <input type="radio" name="BingShi" :checked = otherMsg.isBingShi.value @click="showA(true)"><b>有</b>
            </div>
          </div>
          <transition name="fade-a">
            <div class="condition-a" v-show="otherMsg.isBingShi.value">
              <div class="input-box flex-box">
                <div>
                  <!-- <p>遗传病史描述<span class="btn-que">?</span></p> -->
                  <input type="text" class="bs-desc" v-model="otherMsg.isBingShi.describe.value">
                </div>
              </div>
              <div class="condition-a-desc">
                <p>请描述亲属关系、疾病名称、发病年龄和症状。</p>
                <!-- <a href="#" @click="otherMsg.isBingShi.value = !otherMsg.isBingShi.value">收起</a> -->
              </div>
            </div>
          </transition>
        </li>
        <li>
          <div class="input-box flex-box">
            <div>
              <p>是否有异常疾病表现</p>
              <input type="radio" name="YiChang" :checked = !otherMsg.isYiChang.value @click="showB(false)"><b>无</b>
              <input type="radio" name="YiChang" :checked = otherMsg.isYiChang.value @click="showB(true)"><b>有</b>
            </div>
          </div>
          <transition name="fade-b">
            <div class="condition-b input-box flex-box" v-show="otherMsg.isYiChang.value">
              <div><p>临床表现描述<span class="btn-que">?</span></p>
                <input type="text" v-model="otherMsg.isYiChang.describe.value" placeholder="请描述症状和相应检查结果">
              </div>
            </div>
          </transition>
        </li>
        <li>
          <div class="input-box flex-box">
            <div>
              <p>父母是否近亲结婚</p>
              <input type="radio" name="JinQin" :checked = !otherMsg.isJinQin.value @click="showC(false)"><b>否</b>
              <input type="radio" name="JinQin" :checked = otherMsg.isJinQin.value @click="showC(true)"><b>是</b>
            </div>
          </div>
          <transition name="fade-b">
            <div class="condition-c input-box flex-box" v-show="otherMsg.isJinQin.value">
              <div><p>亲缘关系</p><input type="text" v-model="otherMsg.isJinQin.describe.value" placeholder="如，父母是表兄妹"></div>
            </div>
          </transition>
        </li>
        <!-- <li>
          <div class="input-box flex-box">
            <div>
              <p>临床表现</p>
              <input type="radio" name="LinChuang" :checked = !otherMsg.isLinChuang.value @click="showD(false)"><b>无</b>
              <input type="radio" name="LinChuang" :checked = otherMsg.isLinChuang.value @click="showD(true)"><b>有</b>
            </div>
          </div>
          <transition name="fade-b">
            <div class="condition-c input-box flex-box" v-show="otherMsg.isLinChuang.value">
              <div><p>临床表现描述</p><input type="text" v-model="otherMsg.isLinChuang.describe.value" placeholder="选填"></div>
            </div>
          </transition>
        </li> -->
        <li>
          <div class="input-box flex-box"><div>
            <p>受检者类型</p>
            <p class="sec-btn" @click="selectCheck">{{otherMsg.shouJianType.selectType}}
              <span v-show="otherMsg.shouJianType.selectType === '请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
            </div>
          </div>
          <transition name="fade-b">
            <div class="condition-c input-box flex-box" v-show="otherMsg.shouJianType.showOther">
              <div><p>其他描述</p><input type="text" v-model="otherMsg.shouJianType.describe.value" placeholder="选填"></div>
            </div>
          </transition>
        </li>
        <li>
          <div class="input-box flex-box"><div>
            <p>癌症类型</p>
            <p class="sec-btn" @click="showPicker0">{{otherMsg.cancerType.selectType}}
              <span v-show="otherMsg.cancerType.selectType === '请选择'"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
            </div>
          </div>
          <transition name="fade-b">
            <div class="condition-c input-box flex-box" v-show="otherMsg.cancerType.showOther">
              <div><p>癌症类型其他描述</p><input type="text" v-model="otherMsg.cancerType.describe.value" placeholder="选填"></div>
            </div>
          </transition>
        </li>
      </ul>
    </div>
    <div class="fixed-form-foot">
      <div class="form-foot">
        <div class="form-foot-main">
          <router-link to="/sjFormc"><button class="pre-page">上一步</button></router-link>
          <button @click="formdSubmit" class="next-page">下一步</button>
        </div>
      </div>
    </div>
    <awesome-picker
      ref="picker0"
      :textTitle="picker0.textTitle"
      :data="picker0.data"
      :anchor="picker0.anchor"
      @confirm="handlePicker0Confirm">
    </awesome-picker>
    <selectBox v-if="selectShow" :selectValue="otherMsg.shouJianType.type" :showSelect="selectShow" @tcClothe="tcClothe"></selectBox>
  </div>
</template>
<script>
import Vue from "vue";
import stepBar from "@/components/StepBar.vue";
import selectBox from "@/components/SelectBox.vue";
import AwesomePicker from "vue-awesome-picker";
Vue.use(AwesomePicker);
const STORAGE_KEY = "formdMsg";
const data0 = [];
export default {
  data() {
    return {
      selectShow: false,
      otherMsg: {
        isBingShi: {
          key: "是否有家族遗传病史",
          value: false,
          describe: {
            key: "遗传病史描述",
            value: ""
          }
        },
        isYiChang: {
          key: "是否有异常疾病表现",
          value: false,
          describe: {
            key: "疾病表现描述",
            value: ""
          }
        },
        isJinQin: {
          key: "父母是否近亲结婚",
          value: false,
          describe: {
            key: "亲缘关系",
            value: ""
          }
        },
        isLinChuang: {
          key: "临床表现",
          value: false,
          describe: {
            key: "临床表现描述",
            value: ""
          }
        },
        shouJianType: {
          key: "受检者类型",
          value: false,
          showOther: false,
          type: ["表现正常人群", "其它", "确证患者", "疑似患者"],
          selectType: "表现正常人群",
          selectIndex: "",
          describe: {
            key: "受检者类型-其他描述",
            value: ""
          }
        },
        cancerType: {
          key: "癌症类型",
          value: false,
          showOther: false,
          type: [
            "无",
            "非小细胞肺癌",
            "小细胞肺癌",
            "恶性胸膜间皮瘤",
            "结直肠癌",
            "胃癌",
            "胰腺癌",
            "肝胆癌",
            "食道癌",
            "肛门癌",
            "甲状腺癌",
            "胸腺癌/胸腺瘤",
            "默克尔细胞癌",
            "神经内分泌肿瘤",
            "非黑色素瘤皮肤癌",
            "中枢神经系统肿瘤",
            "肾癌",
            "前列腺癌",
            "卵巢癌",
            "宫颈癌",
            "阴茎癌",
            "外阴癌",
            "膀胱癌",
            "子宫肿瘤",
            "睾丸癌",
            "骨癌",
            "乳腺癌",
            "软组织肉瘤",
            "头颈癌",
            "黑色素瘤",
            "其它"
          ],
          selectType: "无",
          selectIndex: "",
          describe: {
            key: "受检者类型-其他描述",
            value: ""
          }
        }
      },
      picker0: {
        anchor: [],
        textTitle: "",
        data: [data0]
      },
      storageLists: this.$localStorage.fetch(STORAGE_KEY)
    };
  },
  components: {
    stepBar,
    selectBox
  },
  computed: {
    reverseValue(val) {
      // `this` 指向 vm 实例
      return !val;
    }
  },
  watch: {
    storageLists: {
      handler: function(storageLists) {
        this.$localStorage.save(STORAGE_KEY, storageLists);
      },
      deep: true
    }
  },
  methods: {
    showPicker0() {
      this.$refs.picker0.show();
    },
    handlePicker0Confirm(v) {
      // console.log(v);
      this.otherMsg.cancerType.selectType = v[0].value;
      this.otherMsg.cancerType.selectIndex = v[0].index;
      this.otherMsg.cancerType.value = true;
      this.otherMsg.cancerType.showOther = false;
      if (this.otherMsg.cancerType.selectType === "其它") {
        this.otherMsg.cancerType.showOther = true;
      }
    },
    showA(val) {
      this.otherMsg.isBingShi.value = val;
      if (this.otherMsg.isBingShi.value === false) {
        this.otherMsg.isBingShi.describe.value = "";
      }
    },
    showB(val) {
      this.otherMsg.isYiChang.value = val;
      if (this.otherMsg.isYiChang.value === false) {
        this.otherMsg.isYiChang.describe.value = "";
      }
    },
    showC(val) {
      this.otherMsg.isJinQin.value = val;
      if (this.otherMsg.isJinQin.value === false) {
        this.otherMsg.isJinQin.describe.value = "";
      }
    },
    showD(val) {
      this.otherMsg.isLinChuang.value = val;
      if (this.otherMsg.isLinChuang.value === false) {
        this.otherMsg.isLinChuang.describe.value = "";
      }
    },
    selectCheck() {
      this.selectShow = true;
    },
    tcClothe(data) {
      // console.log(data);
      this.otherMsg.shouJianType.selectIndex = data ? data.index : "";
      if (data != undefined) {
        this.otherMsg.shouJianType.selectType = data.value;
        this.otherMsg.shouJianType.value = true;
        this.otherMsg.shouJianType.showOther = false;
      }
      if (this.otherMsg.shouJianType.selectType === "其它") {
        this.otherMsg.shouJianType.showOther = true;
      }
      this.selectShow = false;
    },
    formdSubmit() {
      if (
        this.otherMsg.isBingShi.value === true &&
        this.otherMsg.isBingShi.describe.value === ""
      ) {
        this.$layer.open({
          content: "请描述遗传病史",
          skin: "msg",
          time: 2
        });
        return false;
      } else if (
        this.otherMsg.isYiChang.value === true &&
        this.otherMsg.isYiChang.describe.value === ""
      ) {
        this.$layer.open({
          content: "请填写临床表现描述",
          skin: "msg",
          time: 2
        });
        return false;
      } else if (
        this.otherMsg.isJinQin.value === true &&
        this.otherMsg.isJinQin.describe.value === ""
      ) {
        this.$layer.open({
          content: "请填写亲缘关系",
          skin: "msg",
          time: 2
        });
        return false;
      } else if (this.otherMsg.shouJianType.selectType === "请选择") {
        this.$layer.open({
          content: "请选择受检者类型",
          skin: "msg",
          time: 2
        });
        return false;
      } else if (this.otherMsg.cancerType.selectType === "请选择") {
        this.$layer.open({
          content: "请选择癌症类型",
          skin: "msg",
          time: 2
        });
        return false;
      } else {
        window.localStorage.removeItem("formdMsg");
        setTimeout(() => {
          this.storageLists = this.otherMsg;
        }, 0);
        setTimeout(() => {
          // console.log(window.localStorage);
          console.log(this.$localStorage.fetch(STORAGE_KEY));
          this.$router.push("/SjSubmit");
        }, 10);
      }
    }
  },
  mounted() {
    data0.length = 0;
    for (let i in this.otherMsg.cancerType.type) {
      data0.push(this.otherMsg.cancerType.type[i]);
    }
    // window.localStorage.removeItem("formdMsg");
    this.otherMsg = window.localStorage.formdMsg
      ? JSON.parse(window.localStorage.formdMsg)
      : this.otherMsg;
  }
};
</script>
<style lang="scss" scoped>
.sj-form {
  width: 100%;
  min-height: 100vh;
  padding-bottom: r(70);
  box-sizing: border-box;
  .form-main {
    margin-top: r(28);
    .btn-que {
      width: r(16);
      height: r(16);
      border-radius: 10px;
      background: #dedede;
      color: #fff;
      display: inline-block;
      margin-left: r(8);
      font-size: r(14);
      line-height: r(16);
    }
    input[type="checkbox"],
    input[type="radio"] {
      width: 24px;
    }
    ul {
      li {
        height: auto;
        background: #f9fafd;
        b {
          float: right;
          font-size: r(16);
          color: #717276;
          margin-top: r(6);
          margin-left: r(18);
        }
        p {
          margin-top: r(8);
          &.sec-btn {
            float: right;
            color: #ccc;
          }
        }
      }
      .condition-a {
        width: 100%;
        height: r(137);
        overflow: hidden;
        border-bottom: 1px solid #ddd;
        .input-box {
          height: r(65);
          p {
            margin-top: r(4);
          }
          .bs-desc {
            width: 100%;
            text-align: left;
          }
        }
        .condition-a-desc {
          width: 100%;
          overflow: hidden;
          background: #eee;
          padding: r(6);
          box-sizing: border-box;
          margin-top: r(10);
          margin-bottom: r(12);
          text-align: left;
          p {
            font-size: r(12);
            color: #666666;
            letter-spacing: 0;
            line-height: r(22);
            margin-top: r(4);
          }
          a {
            display: inline-block;
            color: #66b9fe;
            text-decoration: underline;
            margin-top: r(6);
            margin-bottom: r(6);
          }
        }
      }
      .fade-a-enter-active,
      .fade-a-leave-active {
        transition: all 0.35s;
        height: r(137);
      }
      .fade-a-enter,
      .fade-a-leave-to {
        opacity: 0;
        height: 0;
      }
    }
  }
  .fixed-form-foot {
    position: fixed;
    width: 100%;
    background: #fff;
    height: r(70);
    left: 0;
    bottom: 0;
  }
}
.fade-b-enter-active,
.fade-b-leave-active {
  transition: all 0.25s;
  height: r(65);
}
.fade-b-enter,
.fade-b-leave-to {
  opacity: 0;
  height: 0;
}
</style>
